<template>
  <div class="vue3Count">
    vue3Count
    <div class="name">{{ nameInfo1 }}</div>
    <div class="ageInfo">{{ ageInfo1 }}</div>
    <hr>
    <h2>vue3中辅助函数的使用</h2>
    <div class="name">{{ nameInfo }}</div>
    <div class="ageInfo">{{ ageInfo }}</div>
  </div>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import userGetters from '../hooks/userGetters'
export default {
  setup () {
    const userStore = useStore()
    const nameInfo1 = computed(() => userStore.getters.nameInfo)
    const ageInfo1 = computed(() => userStore.getters.ageInfo)
    // const mapGettesC = mapGetters(['nameInfo', 'ageInfo'])
    const mapGetters1 = userGetters(['nameInfo', 'ageInfo'])
    return {
      nameInfo1,
      ageInfo1,
      ...mapGetters1
    }
  }
}
</script>
<style scoped>
</style>
